<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts/core';
import { BarChart,LineChart} from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  // 数据集组件
  DatasetComponent,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent,
  LegendComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import type {
  // 系列类型的定义后缀都为 SeriesOption
  BarSeriesOption, 
  LineSeriesOption
} from 'echarts/charts';
import type {
  // 组件类型的定义后缀都为 ComponentOption
  TitleComponentOption,
  TooltipComponentOption,
  GridComponentOption,
  DatasetComponentOption,
  MarkLineComponentOption
} from 'echarts/components';
import type { 
  ComposeOption, 
} from 'echarts/core';

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
  | MarkLineComponentOption
>;

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  LabelLayout,
  LegendComponent,
  UniversalTransition,
  CanvasRenderer
]);

const barChart = ref();

function echartInit(chartDom:HTMLElement){
  var myChart = echarts.init(chartDom);
  var option: ECOption;
  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: 
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {},
    series: [
      { 
        name: 'morning',
        type: 'bar',
        stack: 'daily',
        emphasis: {
          focus: 'series'
        },
        data: [23, 24, 18, 25, 27, 28, 25]
      },
    { 
      name: 'noon',
      type: 'bar',
      stack: 'daily',
      emphasis: {
        focus: 'series'
      },
      data: [12, 23, 12, 35, 17, 48, 15]
    },
    { 
      name: 'afternoon',
      type: 'bar',
      stack: 'daily',
      emphasis: {
        focus: 'series'
      },
      data: [33, 24, 28, 23, 27, 26, 5]
    }
  ]
  };

  option && myChart.setOption(option);
  //window.addEventListener('resize', myChart.resize);
};

onMounted(() => {
  echartInit(barChart.value)
})

</script>

<template>
  <div id="barChart" ref="barChart" style="width: 600px;height:400px;"></div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
